<template>
	<div>
		<show-info
			:roInfo="roInfo"
			:info="info"
			@changeInfoName="changeInfoName"
			@changeRoInfoName="changeRoInfoName"
		></show-info>
	</div>
</template>

<script>
import ShowInfo from './ShowInfo.vue'
import { reactive, readonly } from 'vue'

export default {
	components: {
		ShowInfo,
	},
	setup() {
		const info = reactive({
			name: 'why',
			age: 12,
		})

		// 使用readonly包裹info
		const roInfo = readonly(info)

		function changeInfoName(payload) {
			info.name = payload
		}

		function changeRoInfoName(payload) {
			info.name = payload
		}

		return {
			roInfo,
			info,
			changeInfoName,
			changeRoInfoName,
		}
	},
}
</script>

<style scoped></style>
